<template>
	<view class="Details" :class="equipment">
		<view class="Details_yue">
			<view class="Details_yue_title">
				当前{{title}}
			</view>
			<h2>{{res.total}}</h2>
		</view>
		<u-divider class="Details_fenge" :text="`${title}明细`" textColor="#ff0000" lineColor="#ccc"></u-divider>


		<view class="Details_box">
			<scroll-view :scroll-top="0" scroll-y="true" class="Details_box_scroll" @scrolltolower="lower">
				<view class="app_list_center_scroll_item" v-for="(item,index) in list" :key=" index">
					<view class="app_list_center_scroll_item_" style="text-align: left;">
						<view class="app_list_center_scroll_item_remark">
							{{item.remark }}
						</view>
						<view class="app_list_center_scroll_item_createtime">
							{{item.createtime?item.createtime:item.time}}
						</view>
					</view>
					<view class="app_list_center_scroll_item_" style="color: #d50a05;text-align: right;">
						{{item.num}}
					</view>
				</view>
			</scroll-view>
		</view>




	</view>
</template>

<script>
	import {
		api_index_get_detail_list
	} from '@/api/member.js'
	export default {
		data() {
			return {
				equipment: '',
				type: '',
				res: '',
				title: '',
				page: 1,
				openid: '',
				list: []
			};
		},
		onLoad(e) {
			console.log(e.type);
			this.type = e.type;
			this.title = e.title;

			uni.setNavigationBarTitle({
				title: this.title
			});
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_get_detail_listFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
		},
		methods: {
			lower() {
				this.page++;
				this.api_index_get_detail_listFun()
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			async api_index_get_detail_listFun() {
				let up = {
					openid: this.openid,
					page: this.page,
					type: this.type
				}
				let data = await api_index_get_detail_list(up);
				this.res = data;
				if (data.error === 0) {
					data.list.forEach(item => {
						this.list.push(item)
					})
				} else {
					this.showinteraction('到底了~')
				}
			},

		}
	}
</script>

<style lang="scss">
	.H5 {
		height: calc(100vh - 88rpx);
	}

	.App {
		height: 100vh;
	}

	.Details {
		width: 100%;
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;


		.Details_yue {
			width: 100%;
			height: 220rpx;
			background-image: url('@/static/member/hldt.png');
			background-repeat: no-repeat;
			background-size: 100%;
			padding: 20rpx 40rpx;
			color: #fff;
			margin: 10rpx 0;

			h2 {
				font-size: 60rpx;
				font-weight: 500;

			}

			.Details_yue_title {
				color: #fff;
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}

		.Details_fenge {
			height: 80rpx;
			margin: 0;
		}

		.Details_box {
			width: 100%;
			flex: 1;
			padding: 10rpx;
			overflow: auto;

			.Details_box_scroll {
				width: 100%;
				height: 100%;

				.app_list_center_scroll_item {
					width: 100%;
					margin: 20rpx 0;
					display: flex;
					text-align: center;
					justify-content: space-around;
					align-items: center;
					line-height: 40rpx;

					.app_list_center_scroll_item_ {
						font-size: 26rpx;
						flex: 1;
					}
				}

			}


		}


	}
</style>